<style lang='scss' scoped>
.left-side {
    position: relative;
    height: 80vh;
    width: 100%;
    width: 33vw;
    background: #fff;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 0 0 10px #ccc;
}
.left-side-header {
    padding: 10px 15px;
}
.left-side-clothes-content {
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    // align-content: space-between;
    padding: 0px 10px;
    // height: 100%;
    box-sizing: border-box;
}
.clothes {
    display: inline-block;
    margin-right: 8px;
}
.scrollView {
    // width: 20vw;
    height: 60vh;
}
.sku-list {
    position: absolute;
    right: -8vw;
    bottom: 10vh;
    height: 26vh;
}
</style>

<template>
    <Row class="left-side">
        <Col span="5" class="h100">
            <side-menu></side-menu>
        </Col>
        <Col span="19">
            <Row class="left-side-header">
                <Col span="16" push="1">
                    <Input v-model="code" size="small" placeholder="请输入商品编号"/>
                </Col>
                <Col span="6" push="2">
                    <Button size="small">筛选</Button>
                </Col>
            </Row>
            <Row>
                <scrollView class="scrollView">
                    <div class="clothes" v-for="i in 50" :key="i">
                        <clothes-item></clothes-item>
                    </div>
                </scrollView>
            </Row>
        </Col>
    </Row>
</template>

<script>
import sideMenu from './components/side-menu'
import clothesItem from './components/clothes-item'
import scrollView from '@/components/scrollView'
import skuList from '../sku-list'

export default {
    components: {
        sideMenu,
        clothesItem,
        scrollView,
        skuList
    },
    data() {
        return {
            code: ""
        }
    }
}
</script>